<template>
  <div class="container layout">
    <Sidebar></Sidebar>

    <!-- 分类列表 -->
    <div class="category_list">
      <ul class="clearfix">
        <li class="fl">
          <router-link to="/docs_list/picture">
            <div class="list_icon">
              <img src="../assets/images/homepage/picture.png">
            </div>
            <p>图片</p>
          </router-link>
        </li>
        <li class="fl">
          <router-link to="/docs_list/video">
            <div class="list_icon">
              <img src="../assets/images/homepage/video.png">
            </div>
            <p>视频</p>
          </router-link>
        </li>
        <li class="fl">
          <router-link to="/docs_list/music">
            <div class="list_icon">
              <img src="../assets/images/homepage/music.png">
            </div>
            <p>音乐</p>
          </router-link>
        </li>
        <li class="fl">
          <router-link to="/docs_list/doc">
            <div class="list_icon">
              <img src="../assets/images/homepage/doc.png">
            </div>
            <p>文档</p>
          </router-link>
        </li>
        <li class="fl">
          <router-link to="/docs_list/rests">
            <div class="list_icon">
              <img src="../assets/images/homepage/rests.png">
            </div>
            <p>其他</p>
          </router-link>
        </li>
        <li class="fl">
          <router-link to="/docs_list/share">
            <div class="list_icon">
              <img src="../assets/images/homepage/share.png">
            </div>
            <p>共享</p>
          </router-link>
        </li>
      </ul>
    </div>

    <!-- 轮播图组件 -->
    <Swiper></Swiper>

    <!-- 所有的文件展示-->
    <div class="total_docs">
      <h2 class="title">全部文件</h2>
      <div class="file_list" ref="fileList">
        <ul>
          <li v-for="item in mountData">
            <div class="con">
              <div class="file_img"></div>
              <div class="right_dec">
                <router-link :to="{path:'/folderlist',query:{category: item.title}}">
                  <h3 class="file_title">{{item.title}}</h3>
                  <p class="file_time">2017-10-30 15:00</p>
                </router-link>
              </div>
              <div class="pulldown" @click.prevent="pulldown($event)" v-if="!item.isDefault"></div>
              <div class="file_sel" v-if="!item.isDefault">
                <div class="file_del">
                  <b></b>
                  删除
                </div>
              </div>
            </div>
          </li>
          <li class="no_more_data" ref="noMore">
            <p>加载完毕，没有更多了~</p>
          </li>
        </ul>
      </div>
    </div>
  </div>
</template>
<script>
  import Swiper from './subComponents/swiper.vue'
  import Sidebar from './subComponents/sidebar.vue'

//  import $ from 'jquery'

  // 引入文件夹图片路径
  import grayFolderUrl from '../assets/images/homepage/grayfolder.png'
  import whiteFolderUrl from '../assets/images/homepage/whitefolder.png'

  // 导入公共方法
  import { pullDown, lazyLoad, nomoreData } from '../common'

  export default {
    data () {
      return {
        isPull: false,   // 记录文件夹是否下拉
        grayFolderUrl: 'url(' + grayFolderUrl + ')', // 记录灰色文件夹图片路径
        whiteFolderUrl: 'url(' + whiteFolderUrl + ')',  // 记录白色文件夹图片路径
        eTarget: {}, // 记录下拉事件源
        falseData: [
          {title: '我的应用数据', isDefault: true},
          {title: '我的资源', isDefault: true},
          {title: 'mole', isDefault: false},
          {title: '前端', isDefault: false}
        ],
        mountData: [],
        noMoreData: false
      }
    },
    components: {
      Swiper,
      Sidebar
    },
    methods: {
      // 控制文件列表选项的上滑和下拉
      pulldown (e) {
        pullDown(e, this)
      }
    },
    created () {
      lazyLoad(this.falseData, this.mountData, this)
    },
    mounted () {
      nomoreData(this)
    }
  }
</script>
<style scoped>
  /* 分类列表 */
  .category_list {
    background-color: #fff;
  }

  .category_list ul {
    width: 100%;
    padding: 0 0.65rem;
  }

  .category_list ul li {
    width: 33.33%;
    height: 1.8rem;
    overflow: hidden;
  }

  .category_list ul li a {
    display: block;
    width: 100%;
    height: 100%;
    box-sizing: border-box;
    padding-top: 0.27rem;
  }

  .category_list ul li a p {
    font-size: 0.25rem;
    color: #333;
    text-align: center;
    line-height: 0.5rem;
  }

  .category_list ul li a .list_icon {
    width: 0.94rem;
    height: 0.94rem;
    margin: 0 auto;
    border-radius: 50%;
    background-color: #EFF4FF;
    text-align: center;
  }

  .category_list ul li a .list_icon img {
    width: 100%;
    height: 100%;
  }

  /* 全部文件 */

  .total_docs .title {
    font-size: 0.32rem;
    color: #666;
    margin-left: 0.28rem;
    border-bottom: 0.01rem solid #e7e7e7;
    line-height: 0.93rem;
    font-weight: 500;
  }

  .total_docs .file_list ul {
    width: 100%;
  }

  .total_docs .file_list ul li {
    height: 1.4rem;
    overflow: hidden;
    padding: 0 0.28rem;
  }

  .total_docs .file_list ul .no_more_data {
    height: 0;
    background-color: #f4f4f4;
  }

  .file_list ul .no_more_data p {
    line-height: 1.4rem;
  }

  .total_docs .file_list ul li .file_sel {
    position: absolute;
    left: -0.28rem;
    top: 1.4rem;
    width: 7.5rem;
    height: 1.4rem;
    background-color: #fff;
  }

  .total_docs .file_list ul li .con {
    width: 100%;
    height: 100%;
    border-bottom: 0.01rem solid #eee;
    position: relative;
    padding: 0.3rem 0;
  }

  .total_docs .file_list ul li .file_sel .file_del {
    text-align: center;
  }

  .total_docs .file_list ul li .file_sel .file_del b {
    display: block;
    width: 0.36rem;
    height: 0.39rem;
    margin: 0.37rem auto 0.05rem;
    background: url('../assets/images/sprite.png') no-repeat -1.77rem -1.54rem;
    background-size: 10rem 6rem;
  }

  .total_docs .file_list ul li .file_img {
    width: 1.2rem;
    height: 0.82rem;
    background: url('../assets/images/homepage/grayfolder.png');
    background-size: 100% 100%;
    position: absolute;
    top: 0.3rem;
    left: 0;
    z-index: 999;
  }

  .total_docs .file_list ul li .right_dec {
    width: 100%;
    padding: 0 0.64rem 0 1.54rem;
  }

  .total_docs .file_list ul li .right_dec .file_title {
    font-size: 0.32rem;
    color: #333;
    line-height: 0.5rem;
  }

  .total_docs .file_list ul li .right_dec .file_time {
    font-size: 0.28rem;
    color: #ccc;
    line-height: 0.3rem;
  }
</style>
